<template>
<div class="solution">
  <h2>  Our Scenes </h2>
  <Loading :isLoading="isLoading"/>
  <div class="content" @click="goToDetails">
    <div v-for="(item,index) in scenesArr" key="item.id"  :class="['item',item.className]" >
      <img :src="item.image_main" alt="" @error="getError">
      <div class="text">
        <strong>{{item.name}}</strong>
        <p>{{item.intro}}</p>
        <LearnButton :title="item.id+''" :name="item.name"/>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {ref,onMounted} from 'vue'
import LearnButton from '../LearnButton.vue'
import Loading from '../Loading.vue'
import { useRouter } from 'vue-router'
import {getSceneList} from '../../api/home.js'
import logoImg from "../../assets/logo-error-small.png"
export default {
  name: "Scenes",
  components:{LearnButton,Loading},
  setup(){
    const router = useRouter()
    let scenesArr = ref([])
    let isLoading = ref(true)
    onMounted(()=>{
      getScene(6)
    })

    const getScene = (pageSize)=> {
      getSceneList({
        "page":1,
        "page_size":pageSize
      }).then(res=>{
        if(res && res.code === 200){
          scenesArr.value=res.data.map((item,index)=>{
            index%2 ==0 ? item.className = "right" : item.className = "left"
            return item
          })
          isLoading.value = false
        }
      })
    }
    const goToDetails = (el)=>{
      if(el.target.title){
        router.push({path:'/sceneDetail',query:{id:el.target.title*1}});
        window._czc.push(['_trackEvent', '点击', '进入到场景详情页面','场景名称：'+el.target.name]);
      }
    }
    const getError = (e) => {
      e.target.src = logoImg
    }
    return{
      scenesArr,
      goToDetails,
      isLoading,
      getError,
      getScene
    }
  },
}
</script>

<style scoped lang="scss">
.solution{
  h2{
    line-height: 120px;
    text-align: center;
    font-size:40px;
    margin-bottom: 0px;
    font-weight: normal;
  }
  .content {
    margin: 0 auto;
    width: 70vw;
    .item{
      position: relative;
      margin-bottom: 20px;
      cursor:pointer;
      background-color: rgba(222,222,222,.5);
      img{
        width:100%;
        height:295px;
        object-fit: cover;
      }
      .text{
        position: absolute;
        top:63px;
        color:white;
        strong{
          font-size:40px;
          line-height: 50px;
        }
        p{
          font-size:20px;
          line-height: 50px;
        }
      }
    }
    .item.left{
      text-align:left;
      .text{
        left:50px;
      }
    }
    .item.right{
      text-align:right;
      .text{
        right:50px;
      }
    }
  }
}
</style>
